<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item  label="一级分类">
          <el-select v-model="category1Id" placeholder="请选择">
            <el-option :label="c1.name"  v-for="c1 in categoryStore.category1IdList" :key="c1.id" :value="c1.id"/> 
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="category2Id" placeholder="请选择">
            <el-option :label="c2.name" :value="c2.id" v-for="c2 in categoryStore.category2IdList" :key="c2.id"/>
    
          </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
          <el-select v-model="category3Id" placeholder="请选择">
            <el-option :label="c3.name" :value="c3.id" v-for="c3 in categoryStore.category3IdList" :key="c3.id"/>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "CategorySelector",
};
</script>
<script lang="ts" setup>
import { reactive,onMounted,computed } from "vue";
// import {reqGetCategory1IdList,reqGetCategory2IdList,} from '@/api/product/category'
import {useCategoryListStore} from "@/stores/categoryList"
import type {Numberable} from '@/api/product/model/categoryModel'
const formInline = reactive({ region: "" });
const categoryStore = useCategoryListStore()
// 1. 页面挂载完成之后要发送请求获取一级导航数据
onMounted(()=> {
  // const result = await reqGetCategory1IdList()
  // console.log('一级数据',result);
  categoryStore.getCategory1IdList()
  console.log('submit!')
})
// 计算属性方便获取后续的id，在里面写逻辑，直接发送i请求获取二级三级数据
const category1Id = computed<number>({
    get(){
      return categoryStore.category1Id as number
    },
    set(val){
      // 获取二级导航数据
      // categoryStore.category1Id = val
       categoryStore.getCategory2IdList(val)
        console.log(val);
    }
  })

  const category2Id = computed<number>({
    get(){
      return categoryStore.category2Id as number
    },
    set(val){
      console.log('二级',val);
      
      categoryStore.getCategory3IdList(val)
    }
  })

  const category3Id = computed<number>({
    get(){
      return categoryStore.category3Id as number
    },
    set(val){
      console.log('san级',val);
      
      categoryStore.setCategory3Id(val)
    }
  })

</script>
<style>
</style>